<template>
	<view class="evaluate-item">
		<view class="evaluate-main">
			<image class="evaluate-head" :src="options.userHead"></image>
			<view class="evaluate-right">
				<view class="evaluate-top">
					<label class="evaluate-name">{{options.userName}}</label>
					<label class="user-auth" v-if="options.auth">实名认证</label>
					<label class="evaluate-time">{{options.time}}</label>
				</view>
				<view class="evaluate-rate">
					<uni-rate class="user-score-rate" :margin="2" :readonly="true" :size="8" :value="options.score" />
					<label class="user-score-text">{{options.scoreText}}</label>
				</view>
			</view>
		</view>
		<view class="evaluate-cotent">{{options.content}}</view>
	</view>
</template>

<script>
	export default {
		name: "evaluate-item",
		props: {
			options: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style>
	.evaluate-item {
		display: flex;
		flex-flow: column;
		padding: 32rpx 0;
		margin: 0 32rpx;
		border-bottom: 1px solid #DDDDDD;
	}

	.evaluate-main {
		display: flex;
		align-items: center;
	}

	.evaluate-head {
		width: 58rpx;
		height: 58rpx;
		margin-right: 31rpx;
		border-radius: 50%;
		background-color: #007AFF;
	}

	.evaluate-right {
		display: flex;
		flex: 1;
		flex-flow: column;
	}

	.evaluate-top {
		display: flex;
		align-items: center;
	}

	.evaluate-name{
		font-size: 28rpx;
		color: #181818;
		margin-right: 18rpx;
		font-weight: 500;
	}

	.user-auth {
		flex: 1 !important;
		position: inherit !important;
		margin: 0 !important;
	}

	.evaluate-time {
		font-size: 22rpx;
		color: #ACACAC;
	}

	.evaluate-rate {
		display: flex;
		align-items: center;
		margin-top: 4rpx;
	}

	.user-score-text {
		font-size: 20rpx;
		margin-left: 12rpx;
		color: #7B7B7B;
	}

	.evaluate-cotent {
		margin-top: 25rpx;
		font-size: 24rpx;
		line-height: 38rpx;
		color: #181818;
	}
</style>
